<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>错误信息提示</title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<style>
			.el-massage{
				width: 380px;
				box-sizing: border-box;
				border-radius: 4px;
				border:1px solid #edeef5;
				position: fixed;
				left: 50%;
				transform: translateX(-50%);
				overflow: hidden;
				padding: 15px 15px 15px 20px;
				display: flex;
				align-items: center;
				z-index: 1000;
				top: 20px;
			}
			.el-message--error{
				background-color: #fef0f0;
                border-color: #fde2e2;              
			}
			.el-massage strong{
				color: #f56c6c;
				margin-left: 40px;
			}
			.el-massage i{
			    display: inline-block;
			    width: 32px;
			    height: 32px;
			}
			.el-massage i img{
			    width: 100%;
			    height: 100%;
			}
			.el-massage i{
			    position: absolute;
			    top: 50%;
			    margin-top: -16px;
			}
			#alert{
			    display: none;
			}
		</style>
	</head>

	<body>
		<div id="alert" class="el-massage el-message--error">
		    <i><img src="images/error.png" /></i>
			<strong class="el-strong"></strong>
		</div>
		<form class="form-horizontal" role="form" id="app">
			<div class="form-group">
				<label class="col-sm-2 control-label">详细地址</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" placeholder="请输入详细地址" v-model="address">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">姓名</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" placeholder="请输入姓名" v-model="name">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
				<!--登录按钮，这里不能用button，button会刷新，具体原因不知道-->
					<span type="submit" class="btn btn-default" @click="setMsg">{{login}}</span>					
				</div>
			</div>
		</form>
	</body>
	<script src="js/vue2.5.js"></script>
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script>
		
		function stips(msg){			
			$('.el-strong').text(msg);
			$('#alert').fadeIn('fast');
			setTimeout(()=>{
			  $('#alert').fadeOut('fast');
			},2000)
		}
		
		var vm = new Vue({
			el: '#app',
			data: {
				login: '登录',
				address:'',
				name:''
			},
			methods:{
				setMsg:function(){
					if(this.address==''){
						stips('详细地址不能为空');
						return
					}else if(this.name==''){
						stips('姓名不能为空');
						return
					}
				}
			}
		})
	</script>

</html>